<template>
  <div class="coupon">

      <!--S顶部tabs-->
      <cube-tab-bar id="tabs" ref="tabs" v-model="selected_tab" :data="tabs" :showSlider="true" @change="changeTab"></cube-tab-bar>
      <!--E顶部tabs-->


      <!--S主体列表-->
      <cube-tab-panels id="main-list" v-model="selected_tab" @click="test">
          <cube-tab-panel :style="{height:page_height+'px'}" v-for="item in tabs" :label="item.label" v-bind:key="item.v">
              <cube-scroll ref="scroll" :options="item.scroll_options" @pulling-up="upGetList">
                  <div class="ul" v-if="item.list.length > 0">
                      <div class="li" :class="itema.coupon_type ? itema.coupon_type : 'hd'" v-for="itema in item.list" v-bind:key="itema.id">
                          <!--S门店卡券-->
                          <router-link class="a" :to="'/coupon_detail/'+itema.id">
                              <div class="type">{{itema.type}}</div>
                              <img class="cover" v-if="itema.cover" :src="itema.cover" />
                              <p class="cost">{{itema.cost}}</p>
                              <p class="name">{{itema.name}}</p>
                              <p class="number">已核销:{{itema.use_number}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量:{{itema.number}}</p>
                              <p class="time">{{itema.time}}</p>
                              <div class="status exchange" v-if="itema.use_number >= itema.number"><i class="iconfont icon-quanxiangqingyeiconyihexiao"></i></div>
                              <div class="status" v-if="itema.use_number < itema.number && itema.expires"><i class="iconfont icon-yiguoqi"></i></div>
                          </router-link>
                      </div>
                  </div>
                  <empty v-else>暂无卡券</empty>
              </cube-scroll>
          </cube-tab-panel>
      </cube-tab-panels>
      <!--E主体列表-->

  </div>
</template>

<script>
import store from "../../store.js";
import empty from "../../components/empty/Empty.vue";
export default {
    name: "coupon",
    data(){
        return {
            page_height:document.documentElement.clientHeight,  //页面高度
            activity_id:0,  //活动id
            //Stabs
            selected_tab:store.state.coupon_classify[0].text,
            tabs:[],
            tabs_index:0,  //tabs下标
            //Etabs
        };
    },
    components:{
      empty
    },
    created(){
        this.activity_id = 0;
        this.initTabs();
        this.getList();
    },
    mounted(){
        this.$nextTick(()=>{
            setTimeout(()=>{
                this.page_height = document.documentElement.clientHeight - this.$refs.tabs.$el.getBoundingClientRect().height;
            },100);
        });
    },
    methods:{
        //整理tabs
        initTabs(){
            store.state.coupon_classify.forEach((item)=>{
                this.tabs.push({
                    label:item.text,
                    v:item.value,
                    list:[
                        // {
                        //     id:1,
                        //     type:'满减券',
                        //     cost:'满100减10元',
                        //     name:'卡券名字卡券名字卡券名字卡券名字卡券名字卡券名字卡券名字'
                        // }
                    ],
                    limit:[0,10],
                    scroll_options:{
                        click:true,
                        pullUpLoad:{
                            txt:{
                                more:"上拉加载更多",
                                noMore:"----我也是有底线的----"
                            },
                        },
                        scrollbar:true
                    }
                });
            });
        },
        //tabs切换
        changeTab(value){
            for(let i=0;i<this.tabs.length;i++){
                if(this.tabs[i].label == value){
                    this.tabs_index = i;
                    break;
                }
            }
            if(this.tabs[this.tabs_index].list.length <= 0){
                this.getList();
            }
        },
        //获取卡券列表
        getList(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"CouponSnapshot",
                doing:"getCouponList",
                limit:this.tabs[this.tabs_index].limit,
                type:this.tabs[this.tabs_index].v,
                uid:this.$sysinfo.uid,
                activity_id:this.activity_id
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.tabs[this.tabs_index].list.push(...res.data.data);
                        this.tabs[this.tabs_index].limit[0] += this.tabs[this.tabs_index].limit[1];
                        this.$refs.scroll[this.tabs_index].forceUpdate(true,true);
                    }else{
                        this.$refs.scroll[this.tabs_index].forceUpdate(false,false);
                    }
                    this.$nextTick(()=>{
                        if(this.$refs.scroll[this.tabs_index].$el.querySelector(".cube-scroll-list-wrapper").getBoundingClientRect().height-1 <= Math.ceil(this.page_height)){
                            this.tabs[this.tabs_index].scroll_options.pullUpLoad = false;
                        }
                        this.$refs.scroll[this.tabs_index].refresh();
                    });
                })
                .catch();
        },
        //上拉加载
        upGetList(){
            this.getList();
        },
        //返回cost
        getCost(type,value){
            switch(type){
                case "dj":
                    return value.face_value+"元";
                case "mj":
                    return "满"+value.face_value+"元减"+value.minus_value+"元";
                case "dh":
                    return value.face_value;
                case "zk":
                    return value.face_value+"折";
                case "rc":
                    return value.face_value;
            }
        },
        //返回类型type
        getType(type){
            for(let i=0;i<this.tabs.length;i++){
                if(this.tabs[i].v == type){
                    return this.tabs[i].label;
                }
            }
        }
    }
};
</script>

<style scoped>
    .coupon{
        height:100%;
    }
    #tabs{
        position: fixed;
        z-index:10;
        top:0;
        left:0;
        width:100%;
        height:50px;
        background: #fff;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        font-size:16px;
    }
    #main-list{
        position:absolute;
        width:375px;
        top:50px;
    }
    .ul{
        padding:0 10px;
    }
    .ul div.li{
        position: relative;
        width: 355px;
        height: 138px;
        margin-top:10px;
        padding:10px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .ul div.li .a{
        color:#fff;
        font-size:14px;
        display: block;
        width: 100%;
        height:100%;
    }
    .ul div.li.dh{
        background: url('../images/dh-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li.dj{
        background: url('../images/dj-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li.mj{
        background: url('../images/mj-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li.rc{
        background: url('../images/rc-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li.zk{
        background: url('../images/zk-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li.hd{
        background: url('../images/hd-bg.png')  no-repeat center center;
        background-size:100% 100%;
    }
    .ul div.li:nth-last-child(1){
        margin-bottom: 10px;
    }
    .ul div.li .type{
        position: absolute;
        right:10px;
        top:10px;
        font-size:18px;
        text-shadow: 0 0 0.1em, 0 0 0.3em;
    }
    .ul div.li img.cover{
        float: left;
        width:75px;
        height:75px;
        border: 3px solid #fff;
        box-sizing: border-box;
        margin-right: 5px;
        object-fit: cover;
    }
    .ul div.li .cost,.ul div.li .name{
        float: left;
        width: 190px;
        font-size: 14px;
        margin-bottom: 5px;
    }
    .ul div.li .cost{
        font-size:16px;
    }
    .ul div.li .number{
        position: absolute;
        bottom: 13px;
        left:10px;
    }
    .ul div.li .time{
        position: absolute;
        right:10px;
        bottom:13px;
    }
    .ul div.li .status{
        position: absolute;
        right:10px;
        top:-4px;
        opacity: .8;
        transform: rotate(60deg);
        color:red;
    }
    .ul div.li .status.exchange{
        transform: rotate(5deg);
    }
    .ul div.li .status i{
        font-size:60px;
    }
</style>
